<!DOCTYPE html>
<html>
  <head>
    <title>选择题</title>
    <style>
      body {
        padding: 0 100px;
      }
      div {
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <h1>选择题</h1>
    <main id="main">
      <!-- <p><span> 001 </span> <span> 在下列哪个选项中，typeof 返回的值为 "object"？' </span></p>
      <input type="radio"><span>  A </span><span> null </span>
      <input type="radio"><span>  B </span><span> undefined </span>
      <input type="radio"><span>  C </span><span> function </span>
      <input type="radio"><span>  D </span><span> string </span> -->
    </main>

    <button onclick="submitAnswers()">提交答案</button>

    <p id="score"></p>

    <script>
      function submitAnswers() {}
      const list = [
        {
          id: '001',
          titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
          options: [
            { op: 'A', value: 'null' },
            { op: 'B', value: 'undefined' },
            { op: 'C', value: 'function' },
            { op: 'D', value: 'string' },
          ],
        },
        {
          id: '002',
          titile: '下列哪个方法可以用于删除一个对象的属性？',
          options: [
            { op: 'A', value: 'object.remove(property)' },
            { op: 'B', value: 'object.delete(property)' },
            { op: 'C', value: 'delete object.property' },
            { op: 'D', value: 'object.pop(property)' },
          ],
        },
        {
          id: '003',
          titile: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
          options: [
            { op: 'A', value: 'array.add(newElement)' },
            { op: 'B', value: 'array.insert(newElement)' },
            { op: 'C', value: 'array.push(newElement)' },
            { op: 'D', value: 'array.unshift(newElement)' },
          ],
        },
      ]
      const answer = {
        '001': 'A',
        '002': 'C',
        '003': 'C',
      }

      const NewArr = list
        .map(function (item) {
          return `
        <div id='${
          item.id
        }'><span> ${item.id} </span> <span>  ${item.titile} </span>
      ${item.options
        .map(function (ite) {
          return `
          <p>
        <input type="radio" name='${item.id}' value='${ite.op}'><span>${ite.op} ${ite.value}</span></p>
      
        `
        })
        .join('')}
      </div> `
        })
        .join('')
      document.querySelector('#main').innerHTML = NewArr

      // for (let k in answer) {
      //   // console.log(k);
      //   const xu = document.getElementById(`#${k}`)
      //   console.log(xu)
      // }
      function getScore() {
        let score = 0
        const options = document.querySelectorAll('input[type="radio"]:checked')
        // console.log(options);
        options.forEach(function (item) {
          if (answer[item.name] === item.value) {
            score++
          }
        })
        document.querySelector('#score').innerHTML = `分数为：${
          score * 10
        }分，满分30分`
      }

      document.querySelector('button').addEventListener('click', function () {
        // document.querySelector('#score').innerHTML=
        getScore()
      })
    </script>
  </body>
</html>
